<template>
	<view class="page-detail ">
		<image src="../../static/imgs/back.png" mode="" class="icon-back" @click="back"></image>
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="product-img">
				<swiper-item v-for="(src,index) in goodsData.imgList" :key="index">
					<image :src="src" mode="" class="product"></image>
				</swiper-item>
			</swiper>
			<view class="p-30">
				<view class="df mb-24">
					<view class="fz42 fw-b c-fe"><text class="fz24 ">积分</text>{{goodsData.price}}</view>
					<!-- <view class="c-ccc ml-14 text-grey" style="text-decoration: line-through;">￥{{goodsData.price_market}}</view> -->
				</view>
				<view class="fz30 c-333 mb-14">	{{goodsData.title}}</view>
				<!-- <view class="fsb df-ac fz22 c-72 mb-30">
					<view>货号：021021023</view>
					<view>剩余0/80件</view>
				</view> -->
				<view class="df-ac bg-f fsb c-72 bs" style="border-radius:22rpx;padding:40rpx 30rpx;">
					<view class="fz30">选择</view>
					<view class="df-ac fz22"  @click="openSku">
						请选择<text v-for="(name,index) in goodsData.sku_name" :key="index">{{name}}/</text>
						<image src="../../static/imgs/arr-r.png" mode="" style="width:14rpx;height:14rpx" class="ml-20"></image>
					</view>
				</view>
				<view class="tab-pro df">
					<view class="tab-pro-item f1" v-for="item in tab" :key="item.id" @click="toggle(item)" :class="{active:item.id==cur}">{{item.name}}</view>
				</view>
				<view v-if="cur==1">
					<rich-text :nodes="htmlNode"></rich-text>
					<!-- <view v-html="goodsData.content"></view> -->
				</view>
				<view class="" v-if="cur==2">
					<view class="pro-param fsb" v-for="item in param" :key="item.id">
						<view class="param-label">{{item.name}}</view>
						<view class="param-value">{{item.value}}</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="pro-footer">
			
			<view class=" ml-20 text-center">
				<view class="btn btn-buy" @click="openSku">立即兑换</view>
				<!-- <view class="btn btn-buy" v-if="goodsData.sku.length == 0" @click="openSku">立即兑换</view> -->
			</view>
		</view>
		<!-- <sku :skuList="nowList" :show="show" @close="show=false"></sku> -->
		<!-- 规格弹出层 -->
		<sku :skuList="nowList" :showModal="showModal" :colors="colors" bottoms="0" @onhide="onhide"></sku>
		
	</view>
</template>

<script>
	//import sku from '../../components/sku.vue'
	import {getCart, setCart , setGoodsData, getToken} from '@/utils/auth.js'
	import sku from '../../components/points/sku.vue'
	export default {
		components: {
			sku
		},
		data() {
			return {
				tab:[
					{id:1,name:'商品详情'},
					//{id:2,name:'商品参数'},
				],
				cur:1,
				param:[
					{id:1,name:'版型',value:'合体'},
					{id:2,name:'适用季节',value:'夏季、春秋'},
					{id:3,name:'上市时间',value:'2020年夏季'},
					{id:4,name:'尺码',value:'S、M、L、XL'},
					{id:5,name:'颜色分类',value:'蓝色、红色、黑色'},
				],
				colors: '#ff0000',
				show:false,
				nowList: {},
				htmlNode: '',
				// 商品详情
				descriptionStr: '<div id="commDesc" hasdata="1" style="line-height: 2; transform-origin: 0px 0px; font-size: 30px;width:100%;"><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/99519/11/4669/136444/5de8bbdbE0cba049d/517f1fb75b582456.jpg!q70.dpg.webp" loaded="17"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/92267/13/4771/160442/5de8bbdbE50655175/7dd51e0b966aba15.jpg!q70.dpg.webp" loaded="16"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/93624/28/4672/131382/5de8bbdbE65d14e5d/81bc1227ec775788.jpg!q70.dpg.webp" loaded="15"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/97366/21/4817/101042/5de8bbdbE8854b673/7c4ce7faa45a418b.jpg!q70.dpg.webp" loaded="14"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/98311/21/4778/122770/5de8bbdcE13375754/f4324ca9294eef4c.jpg!q70.dpg.webp" loaded="13"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/103373/15/4747/118973/5de8bbdcE2058ee8e/d921d5f1a4aa5c89.jpg!q70.dpg.webp" loaded="12"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/88841/34/4711/84977/5de8bbdeE0b691b9a/e69796d32a63bbaa.jpg!q70.dpg.webp" loaded="11"><div class="for_separator"></div><img style="max-width:640px;" src="https://img30.360buyimg.com/popWaterMark/jfs/t1/95248/2/4771/99041/5de8bbdfE06b41b3b/3c4a2b1cb97a5262.jpg!q70.dpg.webp" loaded="10"></div>',
				goodsData: {
					
				},
				showModal: false,
				cartNum:0,
				id:0,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setData({ //设置主题颜色
				//colors: app.globalData.newColor
				id:options.id
			});
			
			this.init()
			//this.getLocation(); //获取位置信息
			this.setFrom(this.descriptionStr); //处理商品详情
			setTimeout(() => {
				this.setData({
					isShow: false
				});
			}, 600);
			// #ifdef APP-PLUS
			this.toBar = app.globalData.toBar + 25 + 'px'
			// #endif
			this.newVideo = uni.createVideoContext('newVideo');
		},
		/**
		 * 生命周期函数--监听购物车数量
		 */
		//onHide: function() {},
		created() {
			this.setCartNum();
		},
		methods: {
			toggle(data) {
				this.cur = data.id
			},
			back() {
				uni.navigateBack()
			},
			openSku() {
				this.nowList = this.goodsData
				this.showModal = true
			},
			onhide() {
				this.showModal = false
			},
			setCartNum() {
				//计算购物车数量
				var cart = getCart();
				console.log("计算购物车数量");
				if(cart){
					console.log(cart.length);
					this.cartNum = cart.length
				}
			},
			setFrom(html) {
				//处理富文本 让图片居中适应
				let newContent = html.replace(/\<img/gi, '<img class="rich-img" ');
				console.log("内容")
				console.log(newContent);
				this.setData({
					htmlNode: newContent
				});
			},
			async init() {
				var query = {
					"keyWord": "", // 模糊搜索，搜索的字段对应keyWordLikeFields
					"type": 'goods_detail', // 全等于筛选，对应fieldEq
					"id": this.id, // ID 
				};
				 let res = await this.$api.goodsData(query).then(res=> {
					 console.log("商品详情")
						console.log(res)
						if(res.code == 0){
							this.goodsData = res.goods;
							this.descriptionStr = res.goods.content;
							
							this.setFrom(this.descriptionStr); //处理商品详情
						}
						this.loadShow = false;
				 }).catch(err=> { console.log(err) }
				 );
			},
		}
	}
</script>

<style lang="scss">
/deep/.rich-img {
	width: 100%;
	height: auto;
}
.page-detail {
	position: relative;
	background-color: #fdfdfd;
	padding-bottom: 130rpx;
	.product {
		width: 100vw;
		height: 830rpx;
		//border-radius:  0 0 40rpx 40rpx;
	}
	.product-img {
		height: 830rpx;
	}
	.icon-back {
		width: 30rpx;
		height: 30rpx;
		position: fixed;
		left: 30rpx;
		top: 60rpx;
		z-index: 100;
	}
	.tab-pro {
		.tab-pro-item {
			font-size: 30rpx;
			color: #282A32;
			height: 110rpx;
			line-height: 110rpx;
			margin-bottom: 30rpx;
			text-align: center;
			position: relative;
			&.active {
				font-size: 36rpx;
				color: #000;
				&::after {
					content:'';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 110rpx;
					height: 7rpx;
					background-color: #573BD1;
					font-weight: bold;
				}
			}
		}
	}
	.pro-param {
		line-height: 40rpx;
		font-size: 30rpx;
		padding: 30rpx;
		border-bottom: 1px solid #ECECEC;
		.param-label {
			width: 120rpx;
			text-align: right;
			color: #706B7D;
		}
		.param-value {
			text-align: right;
			color: #282A32;
		}
	}
	.pro-footer {
		padding: 30rpx;
		background-color: #fff;
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		.btn {
			padding: 20rpx 40rpx;
			color: #fff;
			font-size: 26rpx;
			width: 100%;
			box-shadow: 0px 7rpx 22rpx -7rpx rgba(255,121,109,0.70); 
			border-radius: 7rpx;
			&.btn-add {
				background: linear-gradient(225deg,#282a32, #282a32);
			}
			&.btn-buy{
				width: 100%;
				background: linear-gradient(90deg,#282a32, #282a32);
			}
			&:first-child {
				margin-right: 20rpx;
			}
		}
		.icon-footer {
			flex:1;
			image {
				width: 50rpx;
				height: 50rpx;
				// flex:1;
			}
		}
	}
	.tag-total {
		position: absolute;
		border-radius: 50%;
		padding: 4rpx;
		font-size: 22rpx;
		background-color: #FE5634;
		color: #fff;
		top: 0;
		right: 0;
		width: 18px;
		text-align: center;
	}
}
</style>
